<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>html</li>
        <li>css</li>
        <li>js</li>
        <li>vue</li>
        <li>react</li>
    </ul>
    <script>
        /* 1、获取所有的li */
        var lis = document.getElementsByTagName("li");
        var arr = [...lis];
        console.log(arr)
        /* 2、给每一个元素绑定事件 */
        for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                arr.forEach(item => {
                    item.style.color = "#333"
                })
                this.style.color = "red"
            }
        }
    </script>
</body>

</html>